<template>
    <div>
        <div style="width: 100%;margin-bottom: 5px">
            <div style="display: flex;justify-content: space-between">
                <div>
                    <el-input v-model="search_text"
                              :disabled="showAdvanceSearchVisible"
                              @keydown.enter.native="initPellet"
                              size="small"
                              style="width: 300px;margin-right: 10px"
                              prefix-icon="el-icon-search"
                              clearable
                              @clear="initPellet"
                              placeholder="请输入丹药名称/简介进行搜索。。。"></el-input>
                    <el-button icon="el-icon-search" :disabled="showAdvanceSearchVisible" type="primary" size="small" @click="initPellet">搜索</el-button>
                </div>
                <div>
                    <el-button type="primary" size="small" icon="el-icon-plus" @click="showAddPelletView">批量发放丹药</el-button>
                </div>
            </div>
        </div>
        <div>
            <el-table
                    :data="pellets"
                    stripe
                    border
                    size="small"
                    style="width: 100%;"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        min-width="5%">
                </el-table-column>
                <el-table-column
                        prop="seq_no"
                        label="序号"
                        align="center"
                        min-width="6%">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="丹药名称"
                        min-width="8%">
                </el-table-column>
                <el-table-column
                        prop="type_name"
                        label="丹药种类"
                        min-width="8%">
                </el-table-column>
                <el-table-column
                        prop="medicinal_pellet_rank_name"
                        label="丹药等级"
                        min-width="8%">
                </el-table-column>
                <el-table-column
                        prop="sect_name"
                        label="所属门派"
                        min-width="8%">
                </el-table-column>
                <el-table-column
                        prop="alchemy_attic_name"
                        label="炼丹阁名称"
                        min-width="8%">
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="数量（颗）"
                        min-width="8%">
                </el-table-column>
                <el-table-column
                        prop="brief_introduction"
                        label="简介"
                        min-width="18%">
                </el-table-column>
                <el-table-column
                        prop="createdate"
                        label="创建时间"
                        min-width="12%">
                </el-table-column>

                <el-table-column
                        min-width="10%"
                        prop="isDelete"
                        label="操作">
                    <template slot-scope="scope">
                        <div style="display: flex;justify-content: space-around;width: 100%;">
                            <div>
                                <el-button  size="small" type="success" @click="updateHandler(scope.row)">发放丹药</el-button>
                            </div>
                            <div>
                                <el-button  size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
                <div>
                    <el-button size="small" type="danger"
                               :disabled="this.multipleSelection.length===0"
                               @click="deleteMany"
                    >批量删除</el-button>
                </div>
                <el-dialog
                        :title="title"
                        :visible.sync="dialogVisible"
                        width="30%"
                >
                    <table>
                        <tr>
                            <td>
                                <el-tag>丹药名称</el-tag>
                            </td>
                            <td>
                                <el-input v-model="pellet.name" style="margin-left: 6px" size="small" placeholder="请输入丹药名称"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <el-tag>丹药等级</el-tag>
                            </td>
                            <td>
                                <el-select size="small" v-model="pellet.pellets_rank" placeholder="丹药等级" style="margin-left: 8px;margin-right: 8px">
                                    <el-option
                                            v-for="item in pellets_ranks"
                                            :key="item.id"
                                            :label="item.zh_name"
                                            :value="item.code">
                                    </el-option>
                                </el-select>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <el-tag>简介</el-tag>
                            </td>
                            <td>
                                <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 2, maxRows: 4}"
                                        placeholder="请输入丹药简介"
                                        v-model="pellet.brief_introduction">
                                </el-input>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <el-tag>创建日期</el-tag>
                            </td>
                            <td>
                                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="pellets.createdate" style="width: 100%;"></el-date-picker>
                            </td>
                        </tr>
                    </table>
                    <span slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="doAddorUpdate">确 定</el-button>
                  </span>
                </el-dialog>
                <div>
                    <el-pagination
                            background
                            @current-change="currentChange"
                            @size-change="sizeChange"
                            layout="sizes,prev, pager, next, jumper, ->, total"
                            :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script >
export default {
    name:"PelletQuery",
    data(){
        return {
            showAdvanceSearchVisible:false,
            search_text:"",
            total:0,
            size:10,
            currentPage:1,
            sect_id:JSON.parse(window.sessionStorage.getItem("userInfo")).sect_id,
            alchemy_attic_id:"1",
            multipleSelection:[],
            dialogVisible:false,
            pellets:[],
            pellets_ranks:[],
            title:"",
            pellet:{
                id:"",
                name:"",
                num:"",
                pellets_rank:"",
                medicinal_pellet_rank_name:"",
            }
        }
    },
    methods:{
        //初始化丹药
        initPellet(){
            this.$getRequest("/sys/medicinal_pellet/query?"+"sect_id="+this.sect_id+"&alchemy_attic_id="+this.alchemy_attic_id).then(resp=>{
                if (resp){
                    this.pellets = resp.data;
                    this.total = resp.total;
                }
            })
        },

        //每页条数事件
        sizeChange(size){
            this.size = size;
            this.initPellet();
        },
        //当前页事件
        currentChange(currentPage){
            this.currentPage = currentPage;
            this.initPellet();
        },
        //多选
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        //初始化丹药等级
        initPelletsRank(){
          this.$getRequest("/system/constant/type?type=medicinal_pellet_rank").then(resp=>{
            if (resp){
              this.pellets_ranks = resp;
            }
          })
        },
        //打开发放弹窗
        showAddPelletView(){debugger
            this.pellet = {
              id:"",
              name:"",
              num:"",
              medicinal_pellet_rank_name:"",
            }
            this.dialogVisible = true
            this.title ='添加丹药'
        },
        //打开编辑窗口
        updateHandler(data){
          this.dialogVisible = true;
          this.pellets.id = data.id;
          this.pellets.name = data.name;
          this.pellets.num = data.num;
          this.pellets.medicinal_pellet_rank_name = data.medicinal_pellet_rank_name;
          },
        //丹药删除
        deleteHandler(data){
            this.$confirm('此操作将永久删除['+data.name+']该丹药, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$deleteRequest("/sys/medicinal_pellet/"+data.id).then(resp=>{
                    if(resp){
                        this.initPellet();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //丹药批量删除
        deleteMany(){
            this.$confirm('此操作将永久删除['+this.multipleSelection.length+']种丹药, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = "?";
                this.multipleSelection.forEach(item=>{
                    ids+= "ids=" + item.id + "&";
                });
                ids = ids.substring(0,ids.length-1);
                this.$deleteRequest("/sys/medicinal_pellet/"+ids).then(resp=>{
                    if(resp){
                        this.initPellet();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
      //添加or编辑
      doAddorUpdate() {
        if (this.pellet.id === '') {
          this.$postRequest("/sys/material/", this.material).then(resp => {
            if (resp) {
              this.dialogVisible = false;
              this.initPellet();
              this.pellet = {
                id:"",
                name:"",
                num:"",
                medicinal_pellet_rank_name:"",
              }
            }
          });
        }
      }
    },
    mounted() {
        this.initPellet();
        this.initPelletsRank();
    }
}
</script>
<style scoped>

</style>
